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х Райффайзен 
Банк 


Сергей Константинов 


Raiffeisenbank - CFT 
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План 


> Познакомить c Reconciler 
Ha примере ReactDOM 


" Познакомиться с PLIXL Js 
" Подружить Reconciler c PIXI.Js 


" Посмотреть, как с помощью AST 
и кодогенерации можно собрать 
игровой движок 
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Предыстория 


Предыстория 


НТМІ 5 Canvas змейка 
Много бойлерплейта, сложно 


Почему бь не писать игрь 


в декларативном стиле с JSX 


ЕС 
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Re а ct Be С О n C і | e r Bw jest-react Fix duplicate words tests (#25333) 4 days ago 
№ react-art [Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
BW react-cache Flow: upgrade to 0.140 (#25252) 18 days ago 
BW react-client [Flight] Implement error digests for Flight runtime and expose еггоп... 8 days ago 
BW react-debug-tools [DevTools] Check if Proxy exists before creating DispatcherProxy (#25278 15 days ago 
» Г] О 3 B OJI q eT H a П И © aTb № react-devtools-core Fix: Documentation typos (#24471) 2 days ago 
BW react-devtools-extensions React DevTools 4.25.0 -> 4.26.0 (#25283) 15 days ago 
- 
С О б CT B e H H bl И p e нд е p Q p BW react-devtools-inline React DevTools 4.25.0 -> 4.26.0 (#25283) 15 days ago 
BW react-devtools-shared Fix duplicate words tests (#25333) 4 days ago 
» Отд ел e H И e ал ro р VIT M а BW react-devtools-shell Flow: well formed exports for devtools (#25266) 16 days ago 
BW react-devtools-timeline React DevTools 4.25.0 -> 4.26.0 (#25283) 15 days ago 
OTD И ® О Б КИ ОТ О 6 Щ их М етодо в № react-devtools Fix: Documentation typos (#24471) 2 days ago 
5 BW react-dom-bindings [Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
R © act a BW react-dom [Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
№ react-fetch Flow: remove explicit object syntax (#25223) 22 days ago 
> M O>KH О р е нд е р WTb B D Q М | ы react-fs Flow: гетоме explicit object syntax (#25223) 22 days ago 
BW react-interactions Flow: remove explicit object syntax (#25223) 22 days ago 
G anvas, | О ©, А Г\ d ro | d ; Te p M И H ал, № react-is straightford explicit types (#25253) 18 days ago 
2 BW react-native-renderer Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
fi E m a, 6 ил 6 О рд, BW react-noop-renderer Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
ШЕ react-pg Flow: remove explicit object syntax (#25223) 22 days ago 
M И Kp О KO HT p OJVI e p bl U M ожн О BW react-reconciler Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
даже п И С AT b M 3 bl K № react-refresh straightford explicit types (#25253) 18 days ago 
y y BW react-server-dom-relay Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
7 Е BW react-server-dom-webpack Move react-dom implementation files to react-dom-bindings (#25345) 2 days ago 
t И H ста H C p I XI А p p | | C ati O n BW react-server-native-relay Flight] Implement error digests for Flight runtime and expose errorl... 8 days ago 
BW react-server Fizz/Float] Float for stylesheet resources (#25243) 11 hours ago 
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Reconciler 


hostConfig 


Модуль react-reconcilerenpm, 
реализующий алгоритм 


обработки дерева 


Набор функций, специфичных 
для среды oTDACOBKM. 
Например, создать, удалить 


или изменить узел 
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Познакомимся поближе 


import React from 'react' 
import ReactDOM from 'react-dom' 


const root - document.getElementById('root') 
ReactDOM. render(<h1>Hello, world!«/hi», root) 
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Познакомимся поближе 


import React from 'react' 
import ReactDOM from 'react-dom' 


const root - document.getElementById('root') 
ReactDOM. render(<h1>Hello, world!</hi>, root) 


1 


Компоненты, которыми оперирует 
рендерер — host components 
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Что такое JSX? 


<һ1 className='example'>Hello, world!</h1> 
React.createElement(type, props, children) 


React.createElement('h1', 4 className: 'example' }, "Hello world') 
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ReactDOM.render(<App/>, root) 


import Reconciler from 'react-reconciLler' 
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ReactDOM.render(<App/>, root) 


const hostConfig = {} 
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ReactDOM.render(<App/>, root) 


export const render = (jsx, root) => 
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ReactDOM.render(<App/>, root) 


const reconciler = Reconciler(hostConfig); 
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ReactDOM.render(<App/>, root) 


const container = reconciler.createContainer(root); 
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ReactDOM.render(<App/>, root) 


reconciler.updateContainer(jsx, container, null, () => 1 }); 
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ReactDOM.render(<App/>, root) 


import Reconciler from "react-reconciler' 
const hostConfig = 4) 


export const render = (jsx, root) => 
const reconciler = Reconciler(hostConfig); 
const container = reconciler.createContainer(root); 
reconciler.updateContainer(jsx, container, null, () => 4 )); 
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hostConfig = {... | - объект с набором методов, которые необходимо реализовать для того, 
чтобы reconciler мог взаимодействовать со средой, в которую рендерит 


HostConfig.getPubliclnstance 
HostConfig.getRootHostContext 
HostConfig.getChildHostContext 
HostConfig.prepareForCommit 
HostConfig.resetAfterCommit 
HostConfig.createlnstance 
HostConfig.appendlnitialChild 
HostConfig.finalizelnitialChildren 
HostConfig.prepareUpdate 
HostConfig.shouldSetTextContent 
HostConfig.shouldDeprioritizeSubtree 
HostConfig.create Textlnstance 
HostConfig.scheduleDeferredCallback 
HostConfig.cancelDeferredCallback 
HostConfig.setTimeout 
HostConfig.clearTimeout 
HostConfig.noTimeout 
HostConfig.now 
HostConfig.isPrimaryRenderer 
HostConfig.supportsMutation 
HostConfig.supportsPersistence 
HostConfig.supportsHydration 


ГЕ 
// | Mutation 
// (optional) 
en 


HostConfig.appendChild 
HostConfig.appendChildToContainer 
HostConfig.commitTextUpdate 
HostConfig.commitMount 
HostConfig.commitUpdate 
HostConfig.insertBefore 
HostConfig.insertInContainerBefore 
HostConfig.removeChild 
HostConfig.removeChildFromContainer 
HostConfig.resetTextContent 
HostConfig.hidelnstance 
HostConfig.hideTextInstance 
HostConfig.unhidelnstance 
HostConfig.unhideTextlnstance 


// Persistence 
// (optional) 


HostConfig.clonelnstance 
HostConfig.createContainerChildSet 
HostConfig.appendChildToContainerChildSet 
HostConfig.finalizeContainerChildren 
HostConfig.replaceContainerChildren 
HostConfig.cloneHiddenlnstance 
HostConfig.cloneUnhiddenInstance 
HostConfig.createHiddenTextlnstance 


// Hydration 
// (optional) 


HostConfig.canHydratelnstance 
HostConfig.canHydrateTextlnstance 
HostConfig.getNextHydratableSibling 
HostConfig.getFirstHydratableChild 
HostConfig.hydratelnstance 
HostConfig.hydrateTextlnstance 
HostConfig.didNotMatchHydratedContainerTextInstance 
HostConfig.didNotMatchHydratedTextInstance 
HostConfig.didNotHydrateContainerlnstance 
HostConfig.didNotHydratelnstance 
HostConfig.didNotFindHydratableContainerlnstance 
HostConfig.didNotFindHydratableContainerTextlnstance 
HostConfig.didNotFindHydratablelnstance 
HostConfig.didNotFindHydratableTextInstance 
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const hostConfig = ( 
supportsMutation: true, 
now: Date.now, 
getRootHostContext: () => {}, 
prepareForCommit: () => {}, 
resetAfterCommit: () => 1), 
getChildHostContext: () => {}, 
shouldSetTextContent: () => {}, 
createInstance: () => 1), 
createTextInstance: () => 1), 
appendInitialChild: () => 4}, 
finalizeInitialChildren: () => {}, 
appendChildToContainer: () => {} 
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Reconciler 


" UI agnostic 
> Алгоритм обновления дерева элементов 


‚ Оперирует методами hostConfig для работы 
с конкретной средой 


Frontend 
Conf 2022 


Renderer 


> UI dependent 
‚ Оперирует хост-компонентами — ам, h1, span 


" ATOMapHo применяет изменения 
в конкретной среде 
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Режимы работы 


Режимы работы 


supportsMutation: true 
Мутирует существующие ноды: 
> appendChild, insertBefore, removeChild 


" commitUpdate 


Например: React DOM .. 


Frontend 
Conf 2022 


Режимы работы 


supportsPersistence: true 
Клонирует и заменяєт ноды: 
> replaceContainerChildren, createContainerChildSet 


* clonelnstance 


Например: React Native, canvas, console, ... 
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setState Diff & Patch Layout Paint 


<= Render Phase ————+ 


Commit Phase 
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Первоначальная отрисовка 
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Первоначальная отрисовка 


const App = => 
div className- example" 
img className-'image' src 
p p 
div 


Hello! 
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Первоначальная отрисовка 


Hello! 
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Первоначальная отрисовка 


const App = => 
div className- example" 
img className-'image' src 
p p 
div 


Hello! 
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Первоначальная отрисовка 


const App = => 
div className- example" 
img className-'image' src 
p p 
div 


text: Hello! 
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text: Hello! 
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1. getRootHostContext 


Root 


EEV 
Q IV 


img p 


text: Hello! 
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1. getRootHostContext 


Root 


2. getChildHostContext 


img p 


text: Hello! 
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1. getRootHostContext 


Root 


2. getChildHostContext 
3. shouldSetTextContent 


img p 


text: Hello! 
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1. getRootHostContext 


Root 


2. getChildHostContext 
3. shouldSetTextContent 


4. getChildHostContext 
5. shouldSetTextContent р 


text: Hello! 
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1. getRootHostContext 


Root 


2. getChildHostContext 
3. shouldSetTextContent 


4. getChildHostContext 
5. shouldSetTextContent У 


6. createInstance 


text: Hello! 
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hostConfig 


createlnstance: => 
const instance = createElement 
if className 
className = className 
if tagName === 'IMG' && src 
Src = src 
return 


Hello! 
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hostConfig 


createlInstance: => 


Hello! 


Frontend 
Conf 2022 


hostConfig 


const instance = createElement 


Hello! 
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hostConfig 


if className 
className = className 


Hello! 
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hostConfig 


if tagName --- 'IMG' && src 
src = src 


Hello! 
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hostConfig 


Hello! 


return 
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hostConfig 


createlnstance: => 
const instance = createElement 
if className 
className = className 
if tagName === 'IMG' && src 
Src = src 
return 


Hello! 
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1. getRootHostContext 


Root 
2. getChildHostContext 
3. shouldSetTextContent 
. getChildHostContext 
5. shouldSetTextContent р 
createInstance 


. finalizeInitialChildren 


text: Hello! 
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1. getRootHostContext 


Root 
2. getChildHostContext 
3. shouldSetTextContent 
| 8. getChildHostContext 
. getChildHostContext 
9. shouldSetTextContent 
5. shouldSetTextContent 
. createlnstance 
. finalizeInitialChildren 
text: Hello! 
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5. shouldSetTextContent 


‚ createInstance 


1. getRootHostContext 


2. getChildHostContext 
3. shouldSetTextContent 


getChildHostContext 8. getChildHostContext 


9. shouldSetTextContent 
. finalizeInitialChildren 


text: Hello! 
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5. shouldSetTextContent 


‚ createInstance 


1. getRootHostContext 


2. getChildHostContext 
3. shouldSetTextContent 


getChildHostContext 8. getChildHostContext 


9. shouldSetTextContent 
ll. createInstance 


. finalizeInitialChildren 


text: Hello! 
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. getChildHostContext 
5. shouldSetTextContent 


‚ createInstance 


1. getRootHostContext 


2. getChildHostContext 
3. shouldSetTextContent 


8. getChildHostContext 
9. shouldSetTextContent 


11. createInstance 


12. appendInitialChild 
. finalizelnitialChildren 


text: Hello! 
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hostConfig 


appendInitialChild: == 
appendChild 


> Прикрепляет ребёнка к родителю 
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. getChildHostContext 
5. shouldSetTextContent 


createlInstance 
. finalizeInitialChildren 


text: Hello! 


10. createTextInstance 


1. getRootHostContext 


2. getChildHostContext 
3. shouldSetTextContent 


8. getChildHostContext 
9. shouldSetTextContent 


11. createInstance 


12. appendInitialChild 
13. finalizeInitialChildren 
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. getChildHostContext 
5. shouldSetTextContent 


‚ createInstance 


1. getRootHostContext 


2. getChildHostContext 
3. shouldSetTextContent 


14. createInstance 


15, 16. appendInitialChild 
17. finalizeInitialChildren 


8. getChildHostContext 
9. shouldSetTextContent 


11. createInstance 


12. appendInitialChild 
13. finalizelnitialChildren 


. finalizeInitialChildren 


text: Hello! 


Frontend 
10. createTextInstance Conf 2022 


setState Diff & Patch Layout Paint 


<= Render Phase — 


Commit Phase 
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setState Diff & Patch Layout Paint 


р E 


<= Render Phase >» 


Commit Phase 
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1. getRootHostContext 
18. prepareForCommit 


Root 
2. getChildHostContext 
3. shouldSetTextContent 
14. createInstance 
15, 16. appendInitialChild 
17. finalizelnitialChildren 
| 8. getChildHostContext 
. getChildHostContext 
9. shouldSetTextContent 
5. shouldSetTextContent 
11. createInstance 
. createlnstance 


12. appendInitialChild 
13. finalizeInitialChildren 


. finalizeInitialChildren 


text: Hello! 
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. getChildHostContext 
5. shouldSetTextContent 


1. getRootHostContext 
18. prepareForCommit 
19. appendChildToContainer 


2. getChildHostContext 
3. shouldSetTextContent 


14. createInstance 


15, 16. appendInitialChild 
17. finalizelnitialChildren 


8. getChildHostContext 
9. shouldSetTextContent 


11. createInstance 
createInstance 


. finalizeInitialChildren 13. finalizeInitialChildren 


text: Hello! 


| Frontend 
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hostConfig 


appendChildToContainer: = 
appendChild 


> Добавляет ребёнка к корневому контейнеру 


і Хранящееся в памяти дерево отрисовывается на экран 
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. getChildHostContext 
5. shouldSetTextContent 


. getRootHostContext 
prepareForCommit 


. appendChildToContainer 
resetAfterCommit 


2. getChildHostContext 
3. shouldSetTextContent 


14. createInstance 


15, 16. appendInitialChild 
17. finalizelnitialChildren 


8. getChildHostContext 
9. shouldSetTextContent 


11. createInstance 
createInstance 


12. appendInitialChild 
13. finalizeInitialChildren 


. finalizeInitialChildren 


text: Hello! 
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. getChildHostContext 


5. shouldSetTextContent 


21. 


createInstance 


. finalizeInitialChildren 


commitMount 


text: Hello! 


10. 


ВЕ 


createTextInstance 


15, 16. 


17. finalizeInitialChildren 
23. commitMount 


11. 


12. 
13: 
22. 


1. getRootHostContext 

18. prepareForCommit 

19. appendChildToContainer 
20. resetAfterCommit 


2. getChildHostContext 
3. shouldSetTextContent 


14. createInstance 


appendInitialChild 


8. getChildHostContext 


shouldSetTextContent 


createlnstance 


appendInitialChild 
finalizeInitialChildren 


commitMount 
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. getChildHostContext 


5. shouldSetTextContent 


21: 


createInstance 


. finalizeInitialChildren 


commitMount 


. getRootHostContext 
prepareForCommit 


. appendChildToContainer 
resetAfterCommit 


ВЕ 


text: Hello! 


10. createTextInstance 


15,716; 


17. finalizelnitialChildren 
23. commitMount 


Ыы 


12. 
13. 
22 


2. getChildHostContext 
3. shouldSetTextContent 


14. createInstance 


appendInitialChild 


8. getChildHostContext 


shouldSetTextContent 
createInstance 


appendInitialChild 


finalizeInitialChildren 
commitMount 
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Hello! 
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Разработка своего движка 
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"Opensource-6n6nnoTeka c 
большим комьюнити 
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‚ Орепзоигсе-библиотека c 
большим комьюнити 


· Рендеринг в 20 webGL 
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"Орепвойгсе-библиотека c 
большим комьюнити 


" Рендерингв 2D мера 


" API для работы c 
интерактивной графикой 
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const арр = new PIXI.Application({ 
width: 800, height: 600, 
backgroundColor: 0x1099bb, 
resolution: window.devicePixelRatio || 1, 


m 
document.body.appendChild(app.view); 
const container - new PIXI.Container(); 


app.stage.addChild(container); 


const texture - PIXI.Texture.from('examples/ 
assets/bunny.png'); 
for (let 1 210: ис 025; i I 
const bunny = new PIXI.Sprite(texture); 
bunny.anchor.set(0.5); 
Били ж (п © Б) x07 
bunny.y = Math.floor(i / 5) ж 40; 
container.addChild(bunny); 
) 


container.x = app.screen.width / 2; 
container.y = app.screen.height / 2; 


container.width / 2; 
eontaunersheight 7 2; 


container.pivot.x 
container.pivot.y 


app.ticker.add((delta) => 1 


container. rotation -= 0.01 ж delta; 
ЕНЕ Frontend 
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t = PIXI.Applicati sa 5 > 
mre ое M: T Создаём инстанс PIXI.Application 


backgroundColor: 0x1099bb, 
resolution: window.devicePixelRatio || 1, 
р: 
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Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
document.body.appendChild(app.view); 
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Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 


const container = new PIXI.Container(); Создаём инстанс Container 
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app.stage.addChild(container); 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 


Прикрепляем контейнер к «root» 


Frontend 
Conf 2022 


const texture = PIXI.Texture. from( 'examples/ 
assets/bunny.png'); 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 
Прикрепляем контейнер к «root» 


Создаём инстанс Texture 
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for (let і = 0; і < 25; i++) 4 
const bunny - new PIXI.Sprite(texture); 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 
Прикрепляем контейнер к «root» 


Создаём инстанс Техішге 


Создаєм инстанс Sprite 
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for (let 7 2 0: 1 « 25; i++) 4 


bunny.anchor.set(0.5); 
Bunny x = (ie © Бу) 740; 
bunny.y = Math.floor(i / 5) * 40; 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 
Прикрепляем контейнер к «root» 


Создаём инстанс Техішге 


Создаём инстанс Sprite 


Задаём свойства (props) для sprite 
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for (let i20; і < 25; ін) 4 


container.addChild(bunny); 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 
Прикрепляем контейнер к «root» 


Создаём инстанс Техішге 


Создаём инстанс Sprite 
Задаём свойства (props) для sprite 


Добавляем в дерево sprite 
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container.x 
container.y 


арр. 
арр. 


container.pivot.x 
container.pivot.y 


screen.width / 2; 
Sereeiene ligne, 25 


container.width / 2; 
eontaunersheight 7 2; 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 
Прикрепляем контейнер к «root» 


Создаём инстанс Техішге 


Создаём инстанс Sprite 
Задаём свойства (props) для sprite 


Добавляем в дерево sprite 


Задаём свойства (props) для 
container 


Frontend 
Conf 2022 


app.ticker.add((delta) => 1 


195 


container.rotation -= 0.01 * delta; 


Создаём инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаём инстанс Container 
Прикрепляем контейнер к «root» 


Создаём инстанс Техішге 


Создаём инстанс Sprite 
Задаём свойства (props) для sprite 


Добавляем в дерево sprite 


Задаём свойства (ргорз) для 
container 


Хук для анимации 
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const арр = new PIXI.Application({ 
width: 800, height: 600, 
backgroundColor: 0x1099bb, 
resolution: window.devicePixelRatio || 1, 


document.body.appendChild(app.view); 
const container - new PIXI.Container(); 


app.stage.addChild(container); 


const texture = PIXI.Texture.from('examples/ 
assets/bunny.png'); 


Тог (let i20; і < 25; i++) 5 
const bunny = new PIXI.Sprite(texture); 
bunny.anchor.set(0.5); 
Били ж (п © Б) x07 
bunny.y = Math.floor(i / 5) ж 40; 
container.addChild(bunny); 

y 


container.x 
container.y 


= app.screen.width / 2; 
= app screen лето 2; 
container.width / 2; 
eöntainer.heighe 7 2; 


container.pivot.x = 
container.pivot.y = 
app.ticker.add((delta) => { 

container. rotation -= 0.01 ж delta; 


Е 


Создаем инстанс PIXI.Application 


Прикрепляем к веб-странице 
Создаем инстанс Container 
Прикрепляем контейнер K «root» 


Создаем инстанс Техішге 


Создаем инстанс Sprite 
Задаём свойства (props) для sprite 


Добавляем в дерево sprite 


Задаём свойства (props) для 
container 


Хук для анимации 
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const арр = new PIXI.Application({ 

width: 800, height: 600, 

backgroundColor: 0x1099bb, 
resolution: window.devicePixelRatio || 1, 
im 


document.body.appendChild(app.view); 
const container - new PIXI.Container(); 


app.stage.addChild(container); 


const texture = PIXI.Texture.from('examples/ 
assets/bunny.png'); 


fOr (let i = Op 15-25» 147075 
const bunny = new PIXI.Sprite(texture); 
bunny.anchor.set(0.5); 
bunny.x = (15 5) ж 40: 
bunny.y = Math.floor(i / 5) ж 40; 
container.addChild(bunny); 

y 


container.x 
container.y 


= app.screen.width / 2; 
= app screen лето 2; 
container.width / 2; 
eöntainer.heighe 7 2; 


container.pivot.x = 
container.pivot.y = 
app.ticker.add((delta) => { 

container. rotation -= 0.01 ж delta; 
P) 


app. stage 


container 
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React PIXI renderer 
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React PIXI renderer 


const canvas = document.getElementById("canvas"); 


const app = new PIXI.Application({ 
width: 800, 
height: 600, 
view: canvas, 

backgroundColor: 0x292c33, 

Inr 


render(«App /», app.stage); 


const texture - PIXI.Texture.from(sprite); 


function App() { 


return «sprite texture={texture} width={100} 


height={100} /»; 


app.stage 
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hostConfig 


createInstance: (type, props) => I 
const instance - new PIXI.Sprite(props.texture); 


instance.width - props.width; 
instance.height - props.height; 


return instance; 


} 
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hostConfig 


appendInitialChild: (parent, child) => 1 
parent.addChild(child); 


7 
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hostConfig 


appendChildToContainer: (container, child) => 4 
container.addChild(child); 
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Удалить и добавить 


const boy = PIXI.Texture.from(boyImg); 
const apple - PIXI.Texture.from(appleImg); 


function App() { 
const [visible, setVisible] = useState(true); 


const handleClick = () => 4 
setVisible(false); 


return ( 
<> 
{visible 66 «sprite texture={apple} width={100} height={75} x={650} y={250} />} 
<sprite texture={boy} width={200} height={170} x={50} y={200} buttonMode onClick={handleClick} /> 


</> 
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Обработка событий 


createInstance: (type, props) => 1 
conste = Oye y= Drops; 


instance.x 
instance.y 


X, 
y: 


if (props-onC lick) т 
instance.interactive = true; 
instance.on('click', props.onClick); 


return instance; 
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Удаление 


removeChild: (parentInstance, child) => { 
parentInstance.removeChild(child); 
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Удаление 


app.stage 


removeChildFromContainer: (container, child) => { / \ 


container. removeChild(child) ; 


» 

% Ф 

ә + 
Г ж 
|) a a 
в и 
з a 

+ * 

e * 

Sans?” 
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Демо 
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6. 
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Добавление в конец 


app.stage 


appendChild: (parent, child) -» d 
parent.addChild(child); 


7 
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Добавление в начало 


insertBefore: (parent, child, before) => ( 
parent.addChild(child); 


7 
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Добавление в начало 


app.stage 


insertInContainerBefore: (container, child, before) => 1 
container.addChild(child); 


7 
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Демо 
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Ф 
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Рефакторинг 
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Рефакторинг — Sprite 


const Sprite ОБО ер ето а <) 
const texture = PIXI.Texture.from(img); 


return «sprite texture={texture} 1...агд5) /»; 


Г; 
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Рефакторинг 一 Stage 


const Stage = ({ children, width, height, options }) => ( 


const mountStage = useCallback((canvas) => 4 
const app = new PIXI.Application({ width, height, view: canvas, ...options Jj); 


render(children, app.stage); 
ТО 


return «canvas ref={mountStage} />; 


m 
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isPrimaryRenderer: false 
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Рендер B ReactDOM 


import ReactDOM from "react-dom/client"; 


const container - document.getElementById("root"); 
const root = ReactDOM. createRoot( container) ; 


root.render(«App />); 


т 


function App() { 
return ( 
«Stage options={{ backgroundColor: 0x292c33 }}> 
«Sprite img={img} width={75} height={75} х={725} у={525} /> 
«/Stage» 


7 


у 
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Анимация 
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app.stage 


container 
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l. getRootHostContext 


app.stage 


container 


Frontend 
Conf 2022 


1. getRootHostContext 


app.stage 


2. getChildHostContext 
container 
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1. getRootHostContext 
app.stage 


2. getChildHostContext 
container 


3. getChildHostContext 


Frontend 
Conf 2022 


1. getRootHostContext 
app.stage 


2. getChildHostContext 
container 


3. getChildHostContext 
4. shouldSetTextContent 
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1. getRootHostContext 
app.stage 


2. getChildHostContext 
container 


3. getChildHostContext 
4. shouldSetTextContent 
5. prepareUpdate 
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prepareUpdate: (instance, type, oldProps, newProps) => newProps 
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1. getRootHostContext 
app.stage 6. prepareForCommit 


2. getChildHostContext 
container 


3. getChildHostContext 
4. shouldSetTextContent 
5. prepareUpdate 
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1. getRootHostContext 


app.stage 6. prepareForCommit 


container 


ч Ui! ы UJ 


2. getChildHostContext 


getChildHostContext 
shouldSetTextContent 
prepareUpdate 


commitUpdate 
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commitUpdate: (instance, updatePayload, type, oldProps, newProps) => 1), 
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app.stage 


container 


. getRootHostContext 


6. prepareForCommit 


resetAfterCommit 


. getChildHostContext 


getChildHostContext 
shouldSetTextContent 
prepareUpdate 


ча UJ 


commitUpdate 
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app.stage 


container 


. getRootHostContext 


6. prepareForCommit 


resetAfterCommit 


. getChildHostContext 


getChildHostContext 
shouldSetTextContent 
prepareUpdate 


ча UJ 


commitUpdate 
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Пример 


function App() 1 
const [x, setX] = useState(0); 
const handleMouseMove = (event) => { 
const x = Math.floor(event.data.global.x); 
setX(x); 


7 


return ( 
«Sprite img={img} width={150} height={150} x={x} y={200} onMouseMove={handleMouseMove} /> 
); 
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prepareUpdate 


prepareUpdate: (instance, type, oldProps, newProps) -» newProps, 
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commitUpdate 


commitUpdate: (instance, updatePayload, type, oldProps, newProps) => + 
ir (tvoe === „о расе q 
const { x = 0, у = 0, rotation | = updatePayload; 


instance.x 
instance.y 


х, 
у, 


if (rotation) { 
instance.rotation = rotation; 
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Контекст и хук для анимации 
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Контекст и хук для анимации 


app.ticker.add((delta) => { 
container.rotation -= 0.01 * delta; 
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Контекст и хук для анимации 


import React from "react"; 

export const AppContext = React.createContext(null); 

export const AppProvider = ({ app, children }) => ( 
«AppContext.Provider value={app}>{children}</AppContext.Provider> 
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Контекст и хук для анимации 


const provider = «AppProvider app={tapp}>{children}</AppProvider>; 
render(provider, app.stage); 
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Контекст и хук для анимации 


export const изеАрр = () => { 
const арр = useContext(AppContext); 


Шә ајрјо null 
return; 
} 


return арр; 
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Контекст и хук для анимации 


tuu) Ss 
useApp() ; 


export const useTick 
const 1 ticker j 


useEffect(() => 4 
ticker.add(fn); 


return () => { 
ticker.remove(fn) 


} 
+, [fn, ticker]) 
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Пример с кодом мальчика 


const container = document.getElementById("root"); 
const root = ReactDOM.createRoot (container); 
root.render( 
«Stage options={{ backgroundColor: 0x292c33 }}> 
«App /» 
</Stage> 
J) E 


function App() { 
const [x, setX] = useState(0); 
const [rotation, setRotation] - useState(0); 
useTick((delta) => { 
setRotation((rotation) => rotation - 0.03 * delta); 
л); 
const handleMouseMove = (event) => 1 
const x = Math.floor(event.data.global.x); 
setX(x); 
Fi 


return ( 
=Sprite 
img={boy} 
width={150} 
height={150} 
x={x} 
y={250} 
rotation={rotation} 
onMouseMove={handleMouseMove} 
/> 
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Пример с кодом мальчика 


const [rotation, setRotation] = useState(0); 
useTick((delta) => { 
setRotation((rotation) => rotation - 0.03 * delta); 


1); 
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Пример с кодом мальчика 


const container = document.getElementById("root"); 

const root = ReactDOM.createRoot (container); 

root.render( 

«Stage options={{ backgroundColor: 0x292c33 }}> 
«App /» 

</Stage> 

DE 


function App() { 
const [x, setX] = useState(0); 
const [rotation, setRotation] = useState(0); 
useTick((delta) => { 
setRotation((rotation) => rotation - 0.03 ж delta); 
ДІ 
const handleMouseMove = (event) => 1 
const x = Math.floor(event.data.global.x); 
setX(x); 
Fi 


return ( 
=Sprite 
img={boy} 
width={150} 
height={150} 
x={x} 
y={250} 
rotation={rotation} 
onMouseMove={handleMouseMove} 
/> 
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се 


Hunter 
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И все же смог 
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Змейка 
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Builder 
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Builder 


1. monaco-editor 
2. «iframe /> 
5. Панель настроек 


197 


setCounter((p) => p + 1); 

if (direction 'up') setSnail((p) => [...p, { x: p[p. length - 11. 
if (direction 'down') setSnail((p) => [...p, { x: p[p. length — 19 
if (direction 'left') setSnail((p) => [...p, ( x: plp.length - 1@ 
if (direction 'right') setSnail((p) => [...p, { x: p[p. length – 


a 
ір 
>, [direction, snail, screenWidth, screenHeight]); 
React.useEffect(() => { 
document.addEventListener('keydown', handleKeyDown) ; 
return () => 4 
document. removeEventListener('keydown', handleKeyDown) ; 
һ 
у, 0); 
return |( 
<> 
{background.map(({ x, y, number }, i) => 4 
if (number === 1) 4 
return «ReactPIXI.Sprite Кеу={1} img="../resources/trava.pngg 
} else if (number === 2) { 
return «ReactPIXI.Sprite Кеу={1} imgz"../resources/trava2. pni 
+ 
»} 
«text text={counter} style={{ fontSize: 32, fill: ff }} x={38} 
{snail.map(({ x, у }, i) => 4 
return «graphics key={i} fill={0) 5} drawRect={{ width: sizeg 
»} 
<ReactPIXI.Sprite im /resources/apple.png" width={50} height-(35M. 
«ReactPIXI.Sprite imgz"../resources/apple.png" width={50} height-(35M 
</> 
D; 
н 
const Component = () => 4 
return ( 
«ReactPIXI.Stage width={784} height={584} options-(( backgroundColor: 
«PixiApp /» 
</ReactPIXI.Stage> 
); 
} 
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rotation: 
0 

img 
./resources/apple.png 


onClick 


Добавить обработчик 


children: 
0 


anchor: 
0 
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Builder 


1. monaco-editor 
2.«iframe /» 


5. Панель настроек 


if (getIntersaction(position, applePosition, 30)) { 
const x = randomInteger(@, screenWidth - 50); 
const у = randomInteger(0, screenHeight - 50); 


setApplePosition({ x, УМ; 
setCounter((p) => p + 1); 

if (direction 
if (direction 
if (direction 
if (direction 


5 


}, [direction, snail, screenWidth, screenHeightl); 


React.useEffect(() => { 
document.addEventListener('keydown', handleKeyDown) ; 


return () => 4 


document. removeEventListener('keydown', handleKeyDown) ; 


% 
у, П); 


return ( 
<> 
{background.map(({ x, y, number У, i) => 4 
if (number === 1) { 
return «ReactPIXI.Sprite key={i} img- 
} else if (number === 2) { 
return «ReactPIXI.Sprite key={i} img- 


5 
H} 


«text text={counter} style={{ fontSize: 32, fill: Oxfff 


{snail.map(({ x, у }, i) => 4 
return «graphics Кеу={1} fill={0x 
3 


«ReactPIXI.Sprite imgz"../resources/apple.png" width={50} 
../resources/apple.png" width={50} 


«ReactPIXI.Sprite img 


const Component = () => 4 1 
return ( 


«ReactPIXI.Stage width={784} height={584} options={{ backgro 


<PixiApp /> 
</ReactPIXI.Stage> 
); 


"ир') setSnail((p) => [...p, { x: 
'down') setSnail((p) => І...р, { x: pU. 
'left') setSnail((p) => [...p, { x: p[n 
'right') setSnail((p) => [...p, { x: рі 


28715) drawRect={{ 


p[p. № 


-./resourcel 


../resourcelii 


0 
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Recast 
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Snippet & Javascript </> recast # ЩО Transform default ? 
JSON 


function 'àps() ( Autofocus @ Hide methods (Ніде empty keys | Hide location data | Ніде type keys 
tips.forEach(( ‚ 1) => console.log( Tip ${1}:` + tip)); 
} 


ler 


generator 
expression: 
async 


+ range 


+ Тос: 1 


sourceType 
* range 


* loc 
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Recast 


let tips = 1 


"type": "VariableDeclaration", 
"declarations": [ 
1 
"type": "VariableDeclarator", 
ШЙ E^ E 1 
"type": "Identifier', 
"name": "tips", 
"range": [ 
4, 
8 
16 
" oc { 
stal 
пеш 
со лите ál 
"token": 1 
inm 
п nd": 1 
= Пете a. ál, 
“солите OU 
"token": 2 
|, 
Idest 
ao || 
{ 


"line": "let tips 
"indent": 0, 
"locked": false, 
кетес кати 0 
"sliceEnd": 12 
} 

|І 

“таррхпа5 |1, 

"cachedSourceMap": null, 

"Length: T, 

"name": null 


= зы 
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Recast 


function foo(){} 


w У 


"type": "FunctionDeclaration", 
та" { 
"type": "Identifier", 
“names: 0057 
"range": [ 
9, 
12 
| 
" OG { 
st a 
ет, 
Seo Lunn: 9, 
"token": 1 
"end": { 
папе: ds 
СОН 2712, 
"token": 2 
Т 
Г 
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"type": "ExpressionStatement", 
Recast т 
olis Ы? 


"openingElement": { 
"type": "JSXOpeningElement", 


"name": { 
<App>Hel lo world</App> "type": "JSXIdentifier", 
"name": “ADD. ; 
"range": [ 
1, 
4 
ir 
и ОС = { 
stakt 
“Sline: T, 
teolumn g 1, 
"token": 1 
Lø 
и па": 1 
liner 1, 
column 
"token": 2 


} 
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<App>Hello world</App> 


import i visit ) from "recast"; 
import i parse } from "recast/parsers/babel"; 


export const getIndexByPos - 


Г | 
const ast = parse(code); 
let index = 0; 


visit(ast, 4 
visitJSXOpeningElement(element) 1 

пр 
line >= Number(element.value.loc.start.line) && 
col »- Number(element.value.loc.start.column) && 
line <= Number(element.value.loc.end.line) && 
col <= Number(element. value. loc.end.column)) 1 
this.abort(); 

} 

index++; 

return false; 


335 
return index; 


catch (error) 4 
return -1; 
} 


p 


(code: string, line: number, col: number): 


уран Frpressionstarfenentk,;, 
"expression": 1 
"type": "JSXElement", 
"openingElement": + 
ШИРЕГІ  ПБХОрЕПЕПДЕЛЕЙЕТШІ 
number -> 4 "name": 
"type": "JSXIdentifier", 


"name": "App", 
"range": [ 
1, 
4 
І, 
UL! och“ 1 
"Start et 
“тте ы а 
SCO a s 1, 
"token": 1 
"end": { 
"ше оле 
се UNE 4 
"token": 2 


) 
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<App>Hello world</App> 


import 4 visit } from "recast"; 
import 4 parse } from "recast/parsers/babel"; 


export const getIndexByPos = (code: string, line: number, col: number): number => 1 
Try A 
const ast = parse(code); 
let index = @; 
visit(ast, { 
visitJSXOpeningElement(element) { 
ШЕ 
line >= Number(element.value.loc.start.line) && 
col >= Number(element.value.loc.start.column) && 
line «- Number(element.value.loc.end.line) && 
col <= Number(element.value.loc.end.column)) + 
лао ар о Бе 
} 
1пдех++; 
return false; 


iyd 
return index; 


catch (error) 1 
return -1; 
} 
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<App>Hello world</App> 


import 4 visit } from "recast"; 
import 4 parse } from "recast/parsers/babel"; 


export const getIndexByPos = (code: string, line: number, col: number): number => 1 
Егу 
const ast = parse(code); 
let index = 0; 
visit(ast, { 
visitJSXOpeningElement (element) 1 
Tak 
line »- Number(element.value.loc.start.line) && 
col »- Number(element.value.loc.start.column) && 
line <= Number(element.value.loc.end.line) && 
col <= Number(element.value.loc.end.column)) 4 
лао ар о Бе 
} 
index++; 
return false; 


ЈЕ 
return index; 


catch (error) 1 
return -1; 
} 
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import i print 上 from ; 
import 4 transform } from Е 


const code = print(ast).code; 


const transformed = transform(code, 1 
presets: ["env", "react", "tsx"], 


О; 
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import i print 上 from > 
import { transform } from : 


const code - print(ast).code; 


const transformed - transform(code, 1 
presets: ["env", "react", "tsx"], 


DE 
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Демо 
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Интересные проекты 
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React-pixi-render 


20-графика 
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React-pixi 
20-графика 
httos:/github.com/inlet/react-pixi 


https:/reactpixi.org/ 
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React-pixi-fiber 
20-графика 


https:/github.com/michalochman/react-pixi-fiber 
https:/pylnata.github.io/mowsgli/ 
https:/github.com/Tinkoff/react-pixi-racing-game 
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import { createRoot ) from 'react-dom/client' 
import React, ( useRef, useState ) from 'react' 
import 4 Canvas, useFrame } from 'Greact-three/fiber' 


function Box(props) 1 


ө 
R t-th re e-fi be r // This reference will give us direct access to the mesh 
е а 《 = const mesh = useRef() 


// Set up state for the hovered and active state 
const [hovered, setHover] = useState(false) 
30-графика const Гас ме, setActive] = useState(false) 
// Subscribe this component to the render-loop, rotate the mesh every frame 
Е : - useFrame((state, delta) = (mesh.current.rotation.x += 0.01)) 
htt S: ithub.com mndrs react-three-fiber // Return view, these are regular three.js elements expressed in JSX 
return ( 
<mesh 
{... props} 
ref={mesh} 
scale={active ? 1.5 : 1} 
onClick={(event) = setActive(!active)} 
onPointerOver={(event) = setHover(true)} 
onPointerOut-((event) => setHover(false)}> 
<boxGeometry args={[1, 1, 11) > 
«meshStandardMaterial color-ihovered ? 'hotpink' : 'orange'} > 
</mesh> 


createRoot (document.getElementById('root')).render( 
<Canvas> 
«ambientLight /» 
«pointLight position={[10, 10, 101) > 
«Box position-([-1.2, 0, 01} > 
«Box position={[1.2, 0, 01) > 
</ Canvas», 
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React-figma 
Design 


https:/github.com/react-figma/react-figma 
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Ink 


өөө 
Command line Interfaces 


httos:/github.com/vadimdemedes/ink 


INK 


~/Projects/ink 


> node media/example 
Q tests passed 
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eg 
React-hardware 196, 


Hardware 


https:/github.com/iamdustan/react-hardware 
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Awesome-react-renderer 


Web (+ NW & Electron) 
50 

Desktop 

Mobile 

Command Line Interface 
Television 

Hardware 

Email 

File 

Design 

Music 

Chatbot 
Miscellaneous 

еїс. 


https://github.com/chentsulin/awesome-react-renderer 


p >= pu 


Tetragius/novis 


Game 
Игра Ha промисах co сценариями B yaml 


https:;/github.com/Tetragius/novis 
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React-world 


Game 


Игра на ReactDOM. Анимации Ha CSS 


https:/gitnub.com/sfatihk/react world 
https://sfatihk.github.io/react-world/ 
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Итоги 


1. Познакомились с работой react-reconciler 
2. Написали простой движок, рисующий с PIXI.s 
5. Собрали систему для создания игр кликами 


4. Интересные проекты 
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Да прибудет с вами React! 
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ОК-код с формой 
обратной связи 
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« 


